<!DOCTYPE html>
<!-- 219970720刘莹 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>实验5 用户注册验证的设计与实现</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
		<script src="jquery-3.6.4.min.js"></script>
		<script src="jquery.validate.min.js"></script>
		<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
		<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
		<style>
			body{
				background-image: url("22.jpg");
				/* 设置背景图片不重复的填满整个页面 */
				background-repeat:no-repeat;
				background-size:100% 100%;
				background-attachment: fixed;
				
				width: 100vw;
				height: 100vh;
			}
			#zhu{
				color: aqua;
				cursor: pointer;/* 变小手 */
			}
			#interface{
				display: none;
				background-color: white;
				border: 0;
				width: 550px;
				/* 设置水平、垂直居中 */
				position: absolute;
				top: 50%;
				left: 50%;  
				transform: translate(-50%, -50%);
			}
			#top{
				background-color: teal;
				height: 50px;
			}
			#register_text{/* 游戏注册文字 */
				font-size: 27px;
				float: left;
				color: aliceblue;
				margin: 7px;
			}
			#top input{/* 叉叉 */
				font-family: Comic Sans MS;/* 字体样式 */
				font-size: 35px;
				float: right;
				border: none;/* 去掉边框 */
				background-color: teal;
				color: white;
				width: 45px;
				height: 50px;
				cursor: pointer;/* 鼠标放上去变小手 */
			}
			#information,#bottom{
				border: 0;
				font-size: 40px;
			}
			label,span{
				font-size: 20px;
				color: #666;
			}
			label{
				padding-left: 80px;/* 内边距 */
			}
			input{
				height: 20px;
				border: 1.5px #666 solid;
			}
			#submit_button button{
				margin: 18px 217px;
				font-size: 20px;
				color: white;
				width: 115px;
				height: 34px;
				background-color: darkorange;
				border: darkorange 1.5px solid;
				cursor: pointer;
			}
			.error{
				font-weight: lighter;
				font-size: 14px;
				color: red;
			}
		</style>
	</head>
	<!-- 219970720刘莹 -->
	<body>
		<span id="zhu">注册&nbsp;</span><span>|</span><span>&nbsp;登录</span>
		<div id="interface">
			<div id="top">
				<strong><p id="register_text">游戏注册</p>
				<input type="button" id="x" value="X"></strong>
			</div>
			
			<div id="information">
				<div id="idname">
					<label>用户名:</label>
					<input type="text" id="idname_text">
					<span id="erridname" class="error"></span>
				</div>
				<div id="sex">
					<label>性别:</label>
					<input type="radio" id="sex_"><span>男</span>
					<input type="radio" id="sex_"><span>女</span>
				</div>
				<div id="password">
					<label>密码:</label>
					<input type="password" id="password_text" placeholder="长度不能小于6个字母">
					<span id="errpassword" class="error"></span>
				</div>
				<div id="again">
					<label>再次输入密码:</label>
					<input type="password" id="again_password_text" placeholder="与输入的密码一致">
					<span id="erragain_password" class="error"></span>
				</div>
				<div id="QQ">
					<label>QQ号(选填):</label>
					<input type="number" id="qq_text">
					<span id="errqq" class="error"></span>
				</div>
				<div id="name">
					<label>真实姓名(防沉迷):</label>
					<input type="text" id="name_txet">
					<span id="errname" class="error"></span>
				</div>
				<div id="number">
					<label>身份证号:</label>
					<input type="text" id="number_text">
					<span id="errnumber" class="error"></span>
				</div>
			</div>
			
			<div id="bottom">
				<div id="submit_button">
					<button type="submit" id="submit_button">立即注册</button>
					<div id="dialog"></div>
				</div>
			</div>
			
		</div>
		<script>
			$().ready(function(){
				
				$("#zhu").click(function(){
					$("#interface").show();
				});
				$("#x").click(function(){
					$("#interface").hide();
				});
				
				var a=false;
				var b=false;
				var c=false;
				var d=false;
				var e=false;
				var f=false;
				
					//用户名检测
				$("#idname_text").blur(function(){
					if($(this).val().length==0)
					{
						$("#erridname").html("用户名不为空");
						a=false;
					}
					else
					{
						$("#erridname").html("");
						a=true;
					}
				});
					
					//密码检测
					$("#password_text").blur(function(){
						if($(this).val().length==0)
						{
							$("#errpassword").html("密码不能为空");
							b=false;
						}
						else
						{
							var reg=/^[0-9a-zA-Z]{6,15}$/;
							if(!reg.test($(this).val()))
							{
								$("#errpassword").html("5-15个英文字母或数字");
								b=false;
							}
							else
							{
								$("#errpassword").html("");
								b=true;
							}
						}
					});
					
					//再次输入密码检测
					$("#again_password_text").blur(function(){
						if($(this).val().length==0)
						{
							$("#erragain_password").html("密码不能为空");
							c=false;
						}
						else
						{
							if(jQuery("#password_text").val()!=jQuery("#again_password_text").val())
							{
								$("#erragain_password").html("密码不一致");
								c=false;
							}
							else
							{
								$("#erragain_password").html("");
								c=true;
							}
						}
					});
					
					//QQ号检测
					$("#qq_text").blur(function(){
						var reg=/^[0-9]{10}$/;
						if($(this).val().length==0){
							$("#errqq").html("");
							d=true;
						}
						else{
							if(!reg.test($(this).val()))
							{
								$("#errqq").html("格式错误");
								d=false;
							}
							else{
								$("#errqq").html("");
								d=true;
							}
						}
					});
					
					//真实姓名检测
					$("#name_txet").blur(function(){
						if($(this).val().length==0){
							$("#errname").html("请填写真实姓名");
							e=false;
						}
						else{
							var reg=/^[\u4e00-\u9fa5]{2,5}$/;
							if(!reg.test($(this).val()))
							{
								$("#errname").html("格式错误");
								e=false;
							}
							else{
								$("#errname").html("");
								e=true;
							}
						}
					});
					
					//身份证号检测
					$("#number_text").blur(function(){
						if($(this).val().length==0){
							$("#errnumber").html("请填写身份证号");
							f=false;
						}
						else{
							var reg=/(^\d{15}$)|(^\d{17}(\d|X)$)/;
							if(!reg.test($(this).val()))
							{
								$("#errnumber").html("请正确填写身份证号");
								f=false;
							}
							else{
								$("#errnumber").html("");
								f=true;
							}
						}
					});
					
				//点击立即注册
				$("#submit_button").click(function(){
					if(a && b && c && d && e && f){
						$( "#dialog" ).dialog({
							autoOpen: false, 
							title:"注册成功",
						});
						$( "#dialog" ).dialog( "open" );
					}
					else{
						$( "#dialog" ).dialog({ 
							autoOpen: false , 
							title:"信息有误",
						});
						$( "#dialog" ).dialog( "open" );
					}
				});
			});
		</script>
	</body>
</html>